<!-- 
/*
 * @Description:  魔发 免费体验
 * @Author: kanglin 
 * @Date: 2017-09-30 13:41:25 
 * @Copyright: Created by Panxsoft.
 */
 -->

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="广州魔发科技有限公司,发型虚拟试戴" />
    <meta name="description" content='广州魔发科技有限公司,发型虚拟试戴'>
    <link rel="icon" href="https://benyamin.gz.bcebos.com/mofa/home/%E9%AD%94%E5%8F%91LOGO1.png" type="image/x-icon"/>

    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!--<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="{{ asset('mofa/css/common.css') }}">
    <title>免费体验</title>
    <link rel="stylesheet" href="mofa/css/free-experience.css">

</head>
<body id="top">

<header class="header" id="header">
    <div class="bym-wrapper clearfix">
        <div class="logo">
            <a href="{{route('index')}}">
            <img src="https://benyamin.gz.bcebos.com/mofa/home/%E9%AD%94%E5%8F%91LOGO3.png" alt="logo">
            </a>
        </div>
        <ul class="header-nav clearfix">
            <li class="header-nav-item">
                <a :class="[ /^http:\/\/bymadmin.me\/?$/.test(currentUrl)? 'active': '' ]" href="{{route('index')}}">{{ trans("mofa/common.header.home") }} </a>
            </li>
            <li class="header-nav-item product-service" @mouseenter="enterHandle('production')"  @mouseleave="leaveHandle()">
                <a :class="[ /production-|service-/.test(currentUrl)? 'active': '' ]" href="javascript:;">@lang("mofa/common.header.product-service")</a>
            </li>
            <li class="header-nav-item">
                <a :class="[ /case/.test(currentUrl)? 'active': '' ]" href="{{route('case')}}">@lang("mofa/common.header.case")</a>
            </li>
            <li class="header-nav-item">
                <a :class="[ /video/.test(currentUrl)? 'active': '' ]" href="{{route('video')}}">@lang("mofa/common.header.video")</a>
            </li>
            {{--<li class="header-nav-item" @mouseenter="enterHandle('experience')" @mouseleave="leaveHandle()" >--}}
                {{--<a :class="[ /experience-/.test(currentUrl)? 'active': '' ]" href="javascript:;">@lang("mofa/common.header.experience")</a>--}}
            {{--</li>--}}
            <li class="header-nav-item">
                <a :class="[ /cooperation/.test(currentUrl)? 'active': '' ]" href="{{route('cooperation')}}">@lang("mofa/common.header.agent")</a>
            </li>
            <li class="header-nav-item">
                <a :class="[ /free-experience/.test(currentUrl)? 'active': '' ]" href="{{route('free-experience')}}">@lang("mofa/common.header.experience")</a>
            </li>
            <li class="header-nav-item">
                <a :class="[ /dynamic/.test(currentUrl)? 'active': '' ]" href="{{route('dynamic')}}">@lang("mofa/common.header.dynamic")</a>
            </li>
            <li class="header-nav-item">
                <a :class="[ /about/.test(currentUrl)? 'active': '' ]" href="{{route('about')}}">@lang("mofa/common.header.about")</a>
            </li>
        </ul>
        {{--<div class="login clearfix" >--}}
            {{--<a href="#">登录</a>--}}
            {{--<a href="#">En</a>--}}
        {{--</div>--}}
    </div>
    <!-- 下拉 -->
    <div class="dropdown-plane" v-bind:class="{ active: dropDown}" @mouseenter="enterHandle()" @mouseleave="leaveHandle()">
        <div class="bym-wrapper clearfix">
            <ul class="dropdown-nav">
                <li v-for="item in dropDownData" v-bind:class="[item.name==dropDownActiveItem? 'active': '']" @mouseenter="enterHandle(item.name)" >
                    <a class="first-sub-nav" href="javascript:;" v-text="item.title"></a>
                </li>
            </ul>
            <ul class="dropdown-nav-child">
                <li v-for="childItem in childNavData" :class="[childItem.name == currentActiveChildItem.activeItem ? 'active':'']" @mouseenter.stop="setActiveChildItem(childItem.name)">
                    <a  v-bind:href="'{{route('index')}}/'+childItem.name" v-text="childItem.title"></a>
                </li>
            </ul>
            <article>
                <h3 v-text="getArticle.title"></h3>
                <p v-html="getArticle.summary"></p>
                <a class="dropdown-btn" :href="'{{route('index')}}/'+getArticle.name">MORE></a>
            </article>
        </div>
        <div class="icon" @click="leaveHandle()">
            <img src="https://bym-website.gz.bcebos.com/assets/home/back_home_img.png" alt="down arrow">
        </div>
    </div>
    <!-- 下拉 END -->

</header>

<!-- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>免费体验</title>
    <link rel="stylesheet" href="mofa/css/free-experience.css">
</head>
<body> -->
    <div class="container">

        <div class="section">
            <div class="section-picture"></div>
            <div class="section-content">
                <p class="section-content-slogan">基于单张图片的虚拟换发技术</p>
                <h2 class="section-content-name">魔发镜</h2>
                <h3 class="section-content-title">2D发型虚拟试戴服务</h3>
                <p class="section-content-desc">
                    低成本假发/发型在线试戴、支持发型/发色更换<br>
                    人脸识别实现智能推荐发型、帮助消费者快速精准找到适合发型<br>
                    改善用户体验、提升服务档次、刺激消费欲望
                
                </p>
                <div class="section-content-icons">
                    <div class="section-content-icons-item">
                        <div class="section-content-icons-item-pic">
                            <img src="https://gz.bcebos.com/magic-hair-site/images/free_experience/hair_free_icon.png" alt="">
                        </div>
                        <p class="section-content-icons-item-name">
                            发型试戴
                        </p>
                    </div>
                    <div class="section-content-icons-item">
                        <div class="section-content-icons-item-pic">
                            <img src="https://gz.bcebos.com/magic-hair-site/images/free_experience/recommend_free_icon.png" alt="">
                        </div>
                        <p class="section-content-icons-item-name">
                        推荐发型
                        </p>
                    </div>
                    <div class="section-content-icons-item">
                        <div class="section-content-icons-item-pic">
                            <img src="https://gz.bcebos.com/magic-hair-site/images/free_experience/identification_free_icon.png" alt="">
                        </div>
                        <p class="section-content-icons-item-name">
                            人脸识别
                        </p>
                    </div>
                </div>

                <a href="{{route('2D-virtual-try-on')}}" class="section-content-button">更多详情</a>
            </div>
            
        </div>

        <ul class="websites">
            <li class="websites-item">
                <p class="websites-item-name">SDK</p>
                <a class="websites-item-url" target="_bank" href="https://tryon.xiaojingxiuxiu.com/lib/xj-hair-tryon-min.js">https://tryon.xiaojingxiuxiu.com/lib/xj-hair-tryon-min.js</a>
            </li>
            <li class="websites-item">
                <p class="websites-item-name">说明文档</p>
                <a class="websites-item-url" target="_bank" href="https://tryon.xiaojingxiuxiu.com/hair-sdk-webadmin/#/index/apidoc">https://tryon.xiaojingxiuxiu.com/hair-sdk-webadmin/#/index/apidoc</a>
            </li>
            <li class="websites-item">
                <p class="websites-item-name">演示地址</p>
                <a class="websites-item-url" target="_bank" href="https://tryon.xiaojingxiuxiu.com/demo/hair-tryon-demo.html">https://tryon.xiaojingxiuxiu.com/demo/hair-tryon-demo.html</a>
            </li>
        </ul>

        <div class="accout">
            <span class="accout-item name">
                账号：hair@pkx.com
            </span>
            <span class="accout-item pwd">
                密码:12345
            </span>
        </div>

    </div>
    <div id="aside_box"></div>
</body>
<script src="{{asset('mofa/js/Underscore1.8.3.js')}}" type="text/javascript"></script>
<script src="{{asset('mofa/js/idangerous.swiper.min.js')}}" type="text/javascript"></script>
<script src="{{asset('mofa/js/Vue.js v2.3.3.js')}}" type="text/javascript"></script>
<script src="{{asset('mofa/js/vue-resource v1.3.3.js')}}" type="text/javascript"></script>
<script src="{{asset('mofa/js/common.js')}}" type="text/javascript"></script>
<script src="{{asset('mofa/js/layout.js')}}" type="text/javascript"></script>
</html>